<template>
<div>
	<Card>
		<p slot="title">宣传图片管理</p>
		<div style="max-width:500px;">
			<p>
				<Button v-if="isEditing" type="primary" @click="handleSave" mgr2>保存修改</Button>
				<Button v-if="isEditing" @click="handleCancel">取消</Button>
				<Button v-if="isEditing" right @click="handleShowCreateModal(null)">添加</Button>
				<Button v-if="!isEditing" type="primary" @click="isEditing=true">编辑</Button>
			</p>

			<table class="minitable" long mgt2>
				<tr>
					<th w8>图片</th>
					<th>链接与描述</th>
					<th v-if="isEditing" w5>操作</th>
				</tr>
				<tr v-for="(item, index) in items" :key="index">
					<td><div v-if="item.picture" w8 h5 bg-cover linkable :style="{'background-image':`url(${item.picture})`}" @click="viewPicture(item.picture)"></div></td>
					<td>
						<p><a :href="item.link" target="_blank">{{item.link}}</a></p>
						<p>{{item.description}}</p>
					</td>
					<td v-if="isEditing" text-center>
						<span blue linkable @click="handleShowCreateModal(item)" mgr2>编辑</span>
						<span blue linkable @click="handleDelete(index)">删除</span>
					</td>
				</tr>
			</table>
		</div>
	</Card>

	<Modal v-model="showModal">
		<Form :ref="formRef" :model="model" :label-width="100">
			<FormItem label="图片" prop="picture">
        		<picture-single v-model="model" prop="picture"></picture-single>
			</FormItem>
			<FormItem label="链接" prop="link">
				<Input v-model="model.link" />
			</FormItem>
			<FormItem label="描述" prop="description">
				<Input v-model="model.description" />
			</FormItem>
		</Form>
		
        <div slot="footer">
            <Button @click="showModal=false">取消</Button>
            <Button type="primary" @click="handleOk">确定</Button>
        </div>
	</Modal>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import PictureSingle from '@common/components/picture-single.vue'

@Component({
	components: { PictureSingle }
})
export default class ColumnArticleManager extends AbpBase{
	isEditing:boolean = false;
	isAdding:boolean = false;
	showModal:boolean=false;
	formRef:string = this.getRandomRef('friendlylink-form')
	model:any = this.getDefaultModel()
	items:Array<any> = []

	getDefaultModel() {
		return {
			picture: '',
			link: '',
			description: ''
		}
	}
	async handleShowCreateModal(item) {
		if(item == null) {
			this.model = this.getDefaultModel();
			this.isAdding = true;
		}else {
			this.model = item;
			this.isAdding = false;
		}
		this.showModal = true;
	}
	async handleCancel() {
		await this.handleGetData();
		this.isEditing = false;
	}
	handleOk() {
		(this.$refs[this.formRef] as any).validate( valid => {
			if(valid) {
				if(this.isAdding) {
					this.items.push(this.model);
				}
				this.showModal = false;
			}
		});
	}
	handleDelete(index) {
		this.items.splice(index, 1);
	}
	async handleSave() {
		var response = await this.post('WebsiteInfo/SetAdvertisement', { items: this.items });
		if(response.success) {
			this.isEditing = false;
		}
	}
	async handleGetData() {
		var response = await this.get('WebsiteInfo/GetAdvertisement');
		if(response.success) {
			this.items = response.result;
		}
	}
	async created() {
		await this.handleGetData();
	}
}
</script>